<template>
	<view>
		<view style="padding: 30rpx;height: 200rpx;">
			<textarea v-model="valueObj" focus="true"@blur="showChange(false)" @click="showChange(true)"  @focus="showChange(true)" style="font-size: 40rpx;" placeholder="这一刻的想法..."></textarea>
		</view>
		
		<view style="width: 90%;height: 1rpx;background-color: #C8C7CC;margin: auto;"></view>
	
	   <!-- <view style="display: flex;">
			<image style="width: 100rpx;height: 100rpx;" src="../../../../static/add.png"></image>
			<text style="align-items: center;">所在位置</text>
		</view> -->
		
		<view>
			<view class="row">
				<view class="row_logo">
					<image src="../../../../static/location.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>所在位置</text>
					<image class="icon_right" src="../../../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view>
			<view class="row">
				<view class="row_logo">
					<image src="../../../../static/ren.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>谁可以看</text>
					<image class="icon_right" src="../../../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
	
	
	<view  @touchend.prevent="showBq" style="color: #333333;margin-left: 30rpx;
	font-size: 50rpx;bottom: 10rpx;position: fixed;" v-if="showEmj">😀</view>

	
	<view v-if="sendEmoji"  style="color: #333333;margin-left: 30rpx;
	font-size: 50rpx;bottom: 10rpx;" @click="showChange(false)">
	   <image @touchend.prevent="hideEmj" style="width: 60rpx;height: 60rpx;margin-top: 20rpx;" src="../../../../static/keyword.png"></image>
	</view>
		<view v-if="sendEmoji" class="emoji_view">
					  <scroll-view class="emojis_scroll" scroll-x="false" scroll-y="true">
						<view class="emoji" v-for="(item,index) in emoji" :data-name="item" v-on:tap="_emojiItem" >
							 <text>{{item}}</text>
						</view>
					  </scroll-view>
		</view>
	
	</view>
</template>

<script>
	 import http from '../../../../common/request.js'
	export default {
		data() {
			return {
				sendEmoji:false,
				valueObj:'',
				showEmj:false,
				emoji:[
				  '😀','😁','😂','😃','😄','😅','😆','😉','😇','😐','😑','😶','😏','😣','😥','😮','😯',
				  '😊','😋','😎','😍','😘','😗','😙','😚','😨','😬','😰','😱','😳','😵','😡','😠','😧',
				  '😪','😫','😴','😌','😛','😜','😝','😒','😓','😔','😕','😲','😷','😖','😞','😟','😤','😢','😭','😦'],
				
			}
		},
		methods: {
			onNavigationBarButtonTap:function(e){
			 console.log(e.title)
				if('fabiao'===e.title){
					this.publishPyq()
				}
			},
			
			async publishPyq() {
				    if(''==this.valueObj){
						uni.showToast({
							title:'内容不能为空！'
						})
						return false
					}
					const res = await http.request({
						url: '/friend_circle/publish?content='+this.valueObj,
						method:'POST',
						data:{}
					})
					if(res.data){
						uni.showToast({
							title:'发布成功！'
						})
						this.valueObj=''
					}
					
									
			},
			
			_emojiItem(e){
				let msg= e.currentTarget.dataset.name;
				this.valueObj+=msg
			},
			showChange(flag){
				this.showEmj=flag
				if(this.showEmj){
					this.sendEmoji=false
				}
			},
			hideEmj(){
				this.sendEmoji=false,
				this.showChange(true)
			},
			showBq(){
				this.sendEmoji=!this.sendEmoji
				if(this.sendEmoji){
					this.showEmj=false
				}
			},
		}
	}
</script>

<style lang="scss">
	.emojis_scroll{
	  display: block;
	  float: left;
	  width: 100%;
	  height: 400rpx;
	  padding-left: 25rpx;
	}
	
	.emoji{
	  display: block;
	  float: left;
	  width: 100rpx;
	  height: 100rpx;
	  font-size: 70rpx;
	  text-align: center;
	}
	
	
	
	.emoji_view{
	  box-sizing: border-box;
	  padding: 13rpx 20rpx 0;
	  background: #f5f5f7;
	  border-top:#d7d7d9 1rpx solid;
	  box-sizing: border-box;
	  display: flex;
	}
.row {
		background: white;
		display: flex;
		width: 100%;
		height: 50px;

		.row_logo {
			width: 18%;
			display: flex;
			align-items: center;

			image {
				width: 32px;
				height: 32px;
				margin: auto;
				border-radius: 5px;
			}
		}

		.row_right {
			position: relative;
			height: 100%;
			width: 84%;
			margin-right: 32rpx;
			display: flex;
			align-items: center;

			border: {
				bottom: 1rpx solid #DDDDDD;
			}

			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			.icon_right{
				position: absolute;
				right: 10px;
				width: 15px;
				height: 15px;
				opacity: .5;
			}

		}



	}
</style>
